<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="img/icon.jpg">  <!--??-->

    <title>简单矩阵计算器</title>

    <link rel="stylesheet" href="HelloKim_files/style.css">
    <link rel="stylesheet" href="HelloKim_files/jquery.css">
    <script src="HelloKim_files/pace.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="css/offcanvas.css" rel="stylesheet">

    <script src="js/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="css/handsontable.full.min.css" type="text/css"/>

    <script src="js/math.js" charset="utf-8"></script>


</head>
<!--C.Ronaldo Museum-->

<body style="padding-top:50px;">
<nav class="navbar navbar-fixed-top navbar-inverse" style="padding-top: 0px;"  >

    <div class="container-fluid">

        <div class="navbar-header">
            <!--矢量图标-->
            <svg t="1542379931426" class="icon" style="margin-top: 10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1734" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
                <defs>
                    <style type="text/css"></style>
                </defs>
                <path d="M512 0.288L66.976 258.368v511.744L512 1023.776l445.024-258.08V253.952L512 0.288z m204.704 729.824l-40.064 22.24-40.064-22.24v-178.016h-249.184v178.016l-40.096 22.24-40.032-22.24V293.984l40.064-22.24 40.064 22.24v178.016h249.184V293.984l40.096-22.24 40.032 22.24v436.128z"
                      fill="#ffffff" p-id="1735"></path>
            </svg>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="color: white; text-align: center;margin-top: 13px;font-size: 18px;"> &nbsp;&nbsp; 简单矩阵计算器 &nbsp; &nbsp;</li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <li ><a href="index.html">矩阵乘法</a></li>
                <li ><a href="division.html">矩阵除法</a></li>
                <li ><a href="inverse.html">矩阵求逆</a></li>
                <li ><a href="exponent.html">矩阵求幂</a></li>
                <li class="active"><a href="elementProduct.html">矩阵元素积</a></li>
                <li ><a href="det.html">求行列式</a></li>
                <li><a href="https://www.hellokim.cn/about/">About Me</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</nav><!-- /.navbar -->

<!--首页大视频-->
<section >
    <div class="video">

        <div class="video-frame">
            <img src="HelloKim_files/overlay-hero.png" alt="Decorative image frame">
        </div>

        <div class="video-media">
            <video playsinline="" autoplay="autoplay" loop="" muted="muted" data-autoplay="" poster="/images/ocean/ocean.png" x5-video-player-type="h5">
                <source src="HelloKim_files/bf0c141427e550c967cda81729404d09SafetyDoc.mp4" type="video/mp4">
                <source src="HelloKim_files/ocean.ogv" type="video/ogg">
                <source src="HelloKim_files/3802be9e367156160b119fc0d0dae809SafetyDoc.xml" type="video/webm">
                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>
            <div class="video-overlay"></div>
        </div>
        <div class="video-inner text-center text-white">
            <h1>Hello Kim</h1>
            <p>永远热爱生活|永远追求真理</p>
            <div><img src="HelloKim_files/hexo-inverted.svg" class="brand" alt="Hello Kim"></div>
        </div>
        <div class="video-learn-more">
            <a class="anchor" href="#landingpage"><i class="fe fe-mouse"></i></a>
        </div>
    </div>
</section>


<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <div class="jumbotron" style="margin-bottom: 0px; text-align: left; ">

                <!--介绍-->
                <p>
                    <span style="font-weight: bold" >矩阵逐元素相乘计算</span>
                </p>
                <p>
                    <span style="font-size: 0.7em;" >矩阵对应的元素进行相乘, 也称为element-wise product</span>
                </p>


                <!--矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text"  id="input_rowNum_5_a" value="" style="width: 50px;" />行 &nbsp;
                        <input type="text" id="input_colNum_5_a" value="" style="width: 50px;" />列
                    </p>

                    <p>
                        <span>矩阵B:</span>
                        <input type="text"  id="input_rowNum_5_b" value="" style="width: 50px;" />行 &nbsp;
                        <input type="text"  id="input_colNum_5_b" value="" style="width: 50px;" />列
                    </p>

                    <p>
                        <input  class="btn btn-lg btn-success" type="button" id="but_shape_5" value="生成矩阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_5_a"></div>
                    <br/>
                </div>

                <!--矩阵B-->
                <div>
                    <p>
                        矩阵B:
                    </p>
                    <div id="myTable_5_b"></div>
                    <br/>

                </div>

                <!--计算按钮-->
                <div>
                    <p>
                        <input  class="btn btn-lg btn-success" style="width: 200px;" type="button" id="but_result_5" value="计 算 结 果"/>
                    </p>
                </div>

            </div>

            <div class="row marketing" style="margin-left: 5%;  margin-top: 0px;" >
                <p>
                <h3>计算结果: </h3>
                </p>
                <br/>
                <div id="myTable_5_r"></div>
                <br/>
            </div>

        </div><!--/.col-xs-12.col-sm-9-->

        <!--表格的js-->
        <script type="application/javascript">

            //初始化数据
            const data = [
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0]
            ];

            //选项卡5--计算叉积-----------------------------------------
            //点击按钮生成表格
            var but_shape_5 = document.getElementById("but_shape_5");
            but_shape_5.onclick = showTableFromShape_5;

            //定义矩阵行列数
            var input_rowNum_5_a = document.getElementById("input_rowNum_5_a");
            var input_colNum_5_a = document.getElementById("input_colNum_5_a");
            var input_rowNum_5_b = document.getElementById("input_rowNum_5_b");
            var input_colNum_5_b = document.getElementById("input_colNum_5_b");


            const myTable_5_a = document.getElementById('myTable_5_a');
            const ht_5_a = new Handsontable(myTable_5_a, {
                data: data,
                rowHeaders: true,
                colHeaders: function (index) {
                    return index + 1;
                },
                licenseKey: 'non-commercial-and-evaluation'
            });

            const myTable_5_b = document.getElementById('myTable_5_b');
            const ht_5_b = new Handsontable(myTable_5_b, {
                data: data,
                rowHeaders: true,
                colHeaders: function (index) {
                    return index + 1;
                },
                licenseKey: 'non-commercial-and-evaluation'
            });

            const myTable_5_r = document.getElementById('myTable_5_r');
            const ht_5_r = new Handsontable(myTable_5_r, {
                data: data,
                rowHeaders: true,
                colHeaders: function (index) {
                    return index + 1;
                },
                licenseKey: 'non-commercial-and-evaluation'
            });

            function showTableFromShape_5() {

                var rowNum_5_a = input_rowNum_5_a.value;
                var colNum_5_a = input_colNum_5_a.value;
                var rowNum_5_b = input_rowNum_5_b.value;
                var colNum_5_b = input_colNum_5_b.value;

                var data_5_a = new Array();
                for (var k = 0; k < rowNum_5_a; k++) {
                    data_5_a[k] = new Array();
                    for (var j = 0; j < colNum_5_a; j++) {
                        data_5_a[k][j] = 0;
                    }
                }

                var data_5_b = new Array();
                for (var q = 0; q < rowNum_5_b; q++) {
                    data_5_b[q] = new Array();
                    for (var t = 0; t < colNum_5_b; t++) {
                        data_5_b[q][t] = 0;
                    }
                }

                ht_5_a.updateSettings({
                    data: data_5_a
                });

                ht_5_b.updateSettings({
                    data: data_5_b
                });

            }

            //点击按钮计算显示结果
            var but_result_5 = document.getElementById("but_result_5");
            but_result_5.onclick = getResult_5;

            function getResult_5() {
                //从表格中取数据
                var data_5_a = ht_5_a.getData();
                var data_5_b = ht_5_b.getData();
                var data_5_r = math.cross(data_5_a, data_5_b);

                ht_5_r.updateSettings({
                    data: data_5_r
                });
            }
            //选项卡5--计算叉积==============================================
        </script>





        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
            <div class="list-group">
                <a href="#" class="list-group-item">M_1</a>
                <a href="#" class="list-group-item">M_2</a>
                <a href="#" class="list-group-item">M_3</a>
            </div>
        </div><!--/.sidebar-offcanvas-->
    </div><!--/row-->

    <hr>

    <footer>
        <p>© 2019 HelloKim Copyright</p>
    </footer>

</div><!--/.container-->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>

<script src="js/offcanvas.js"></script>


</body></html>